<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>一键转帐</title>

    <link rel="stylesheet" href="static/css/common.css">

    <link rel="stylesheet" href="static/css/layout.css">

    <link rel="stylesheet" href="static/css/01.css">

    <style>
        .m-content {
            overflow: hidden;
            overflow-y: scroll;
        }

        .top_area {

            height: 4rem;
            background-color: #498FF5;
            margin: .3rem;
            border-radius: .2rem;

            display: flex;

            flex-direction: column;
            padding: .5rem .2rem .5rem .2rem;

            background: url(static/img/0428/bg.png) no-repeat;
            background-size: contain;
            background-size: 100% 100%;

        }



        .top_area>div {
            display: flex;
            flex: 1;
            flex-direction: row;
            height: 50%;
        }

        .top_area .one .one_left {
            width: 1.5rem;
            border-radius: .75rem;
            border: 1px white solid;
            overflow: hidden;
            background-color: white;
            margin-left: .2rem;
        }

        .top_area .one .one_right {
            flex-grow: 1;
            /* background-color: lightcoral; */

            line-height: .5rem;

            display: flex;
            flex-direction: column;
            /* margin: .1rem; */
            margin-left: .2rem;

        }



        .top_area .one .one_left img {
            width: 100%;
            height: 100%;
            border-radius: .75rem;
            overflow: hidden;
        }

        .top_area .one .one_right .one_right_top {
            font-size: .4rem;
            color: white;
            display: flex;
            flex-direction: row;
            /* justify-content: center; */
            justify-items: center;
            align-content: center;
            align-items: center;
            flex: 4;

        }

        .top_area .one .one_right .one_right_bottom {
            font-size: .3rem;
            color: white;
            flex: 2;
            letter-spacing: .04rem;
        }


        .top_area .one .one_right .one_right_top img {
            height: .32rem;
            width: .36rem;
            margin-left: .2rem;
        }

        .two {
            display: flex;
            flex-direction: row;
            justify-content: left;
            justify-items: center;
            align-items: center;
            color: white;
            font-size: .25rem;
            padding-top: .3rem;
            margin-left: .2rem;
        }

        .two .copy {
            margin-left: .2rem;
            padding: 0.05rem .1rem;
            border: 1px white solid;
            border-radius: .05rem;
            letter-spacing: .04rem;
        }


        .mid_area {
            height: auto;
            min-height: 2rem;
            margin: .2rem;
            margin-bottom: .2rem;
            /* background-color: lightblue; */
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;
        }


        .mid_area .each {
            height: 1.5rem;
            /* background-color: lightseagreen; */
            flex-wrap: wrap;
            width: 33.333333333333%;

            display: flex;
            flex-direction: column;
            margin-bottom: .6rem;
        }

        .mid_area .each .each_img {
            /* background-color: lightpink; */
            flex-grow: 1;
            justify-content: center;
            align-items: center;
            align-content: center;
            display: flex;
        }


        .mid_area .each .each_title {
            height: 20px;
            line-height: 20px;
            text-align: center;
            font-size: .26rem;
        }

        .layer_input {
            line-height: .7rem;
            height: .7rem;
            border: none;
            border: 1px #ececec solid;
            padding: .1rem .2rem;
            width: 100%;
            box-sizing: border-box !important;
        }

        .dot {
            text-align: center;
            width: .18rem;
            height: .18rem;
            background-color: #DC1D1D;
            position: relative;
            display: inline-block;
            top: -0.6rem;
            right: -0.14rem;
            border-radius: .1rem;
        }
    </style>



</head>

<body class="m-body has-footer">


    <div class="m-header inline-block-container">
        <div class="m-header-back inline-block-container">
            <em></em>
            <span>返回</span>
        </div>
        <div class="m-header-title">
            个人中心
        </div>
        <div class="m-header-right">
            <div style="padding-right: .3rem" class="buz_blue_yellow">
                <img style="margin-top:.3rem" src="static/img/0428/设置.png" alt="" />
            </div>
        </div>
    </div>

    <div class="m-content" style="background-color: white;">

        <div class="top_area">


            <div class="one">
                <div class="one_left">
                    <img src="static/img/head.png" alt="">
                </div>
                <div class="one_right">
                    <div class="one_right_top">
                        <span>迪丽热巴</span>
                        <img src="static/img/0428/写文章.png" class="quick_set_user_name" alt="">
                    </div>
                    <div class="one_right_bottom">16866676823</div>
                </div>
            </div>

            <div class="two">
                <div class="code">WEWEFW3RR423FEWEFWE</div>
                <div class="copy">复制邀请码</div>
            </div>


        </div>

        <div class="mid_area">
            <div class="each">
                <div class="each_img">
                    <img src="static/img/0428/钱袋.png" alt="">
                </div>
                <div class="each_title">
                    佣金设置
                </div>
            </div>
            <div class="each">
                <div class="each_img">
                    <img src="static/img/0428/客服.png" alt="">
                </div>
                <div class="each_title">
                    在线客服
                </div>
            </div>
            <div class="each">
                <div class="each_img">
                    <img src="static/img/0428/钱包.png" alt="">
                </div>
                <div class="each_title">
                    我的钱包
                </div>
            </div>
            <div class="each">
                <div class="each_img">
                    <img src="static/img/0428/收款.png" alt="">
                </div>
                <div class="each_title">
                    收款设置
                </div>
            </div>

            <div class="each">
                <div class="each_img">
                    <img src="static/img/0428/帮助.png" alt="">
                </div>
                <div class="each_title">
                    帮助中心
                </div>
            </div>

            <div class="each">
                <div class="each_img">
                    <img src="static/img/0428/应用.png" alt="">
                </div>
                <div class="each_title">
                    应用设置
                </div>
            </div>
            <div class="each">
                <div class="each_img">
                    <img src="static/img/0428/安全.png" alt="">
                </div>
                <div class="each_title">
                    安全设置
                </div>
            </div>
            <div class="each">
                <div class="each_img">
                    <img src="static/img/0428/链接.png" alt="">
                </div>
                <div class="each_title">
                    钱包地址
                </div>
            </div>


        </div>


    </div>

    <div class="footer-nav inline-block-container">

        <div class="footer-nav-each">
            <div class="footer-nav-each-img"></div>
            <a href="">首页</a>
        </div>

        <div class="footer-nav-each active">
            <div class="footer-nav-each-img"></div>
            <a href="">行情</a>
        </div>

        <div class="footer-nav-each">
            <div class="footer-nav-each-img"></div>
            <a href="">交易</a>
            <span class="dot"></span>
        </div>

        <div class="footer-nav-each">
            <div class="footer-nav-each-img"></div>
            <a href="">场外</a>
        </div>
        <div class="footer-nav-each">
            <div class="footer-nav-each-img"></div>
            <a href="">钱包</a>
        </div>


    </div>

    <style>
        .set_pwd_div {
            display: none;
        }
    </style>
    <div class="set_pwd_div">
        <input type="text" class="layer_input" placeholder="请输入新用户名">
    </div>

    <script src='static/js/jquery-1.8.2.min.js'></script>
    <script src="static/js/common.js "></script>


    <link rel="stylesheet " href="static/plugins/layer/mobile/need/layer.css ">
    <script src="static/plugins/layer/mobile/layer.js "></script>


    <script type="text/javascript ">
        $(function () {



            $(".quick_set_user_name").click(function () {

                layer.open({
                    title: [
                        '修改昵称',
                        'background-color: #6AA5F5; color:#fff;'
                    ],
                    anim: 'up',
                    content: $('.set_pwd_div').html(),
                    btn: ['确定', '取消'],
                    yes: function (index) {

                        var input_val = $(".layer_input")[1].value;
                        alert(input_val);

                        layer.close(index);
                    }
                });
            });


            $(".copy").click(function () {
                alert('点击的复制');
            });



        });
    </script>
</body>

</html>